<template>
	<view class="pageBox">
		<view class="contentBox">
			<view class="cardText">
				我的名片
			</view>
			<view class="cardBox">
				<view class="company">
					广东创科捷智能技术有限公司
					<view class="logo">
						<image src="../../static/公司logo图片.png" mode=""></image>
					</view>
				</view>
				<view class="infoBox">
					<view class="personName">
						{{cardName}}
					</view>
					<view class="">
						职位：{{cardWork}}
					</view>
				</view>
				<view class="linkBox">
					<view class="">
						<text class="icontext iconfont icon-shoujihao"></text>{{cardPhone}}
					</view>
					<view class="">
						<text class="icontext iconfont icon-weizhi1"></text>广东省江门市蓬江区凤湾里11幢首层
					</view>
				</view>
				<view class="business">
					<text
						class="icontext iconfont icon-yewu"></text>公司业务范围：办公设备、耗材、用品销售、复印机、投影机、舞台租凭、电脑组建、网络整改、安防系统集成安装、企业ERP、FTP系统搭建、财务软件、商业连锁系统
				</view>
			</view>
		</view>
		
		<view class="formList">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width=120rpx label="姓名" prop="name">
					<u-input placeholder="请输入姓名" v-model="form.name" />
				</u-form-item>
				<u-form-item label-width=120rpx label="职位" prop="work">
					<u-input placeholder="请输入职位" v-model="form.work" />
				</u-form-item>
				<u-form-item label-width=120rpx label="手机号" prop="phone">
					<u-input placeholder="请输入手机号" v-model="form.phone" />
				</u-form-item>
			</u-form>
			<u-button @click="submit">预览并保存</u-button>
		</view>
	<view class="boxBtn">
		<button v-if="flag||flag1"  class="bottomBox"  open-type="share" >分享</button>
		<button v-else class="bottomBox" @click="showTip">分享</button>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:'https://mp.weixin.qq.com/s/orQnAZaKIDBaUNT37WZ8YA',
				cardName: '姓名未填写',
				cardWork: '职位未填写',
				cardPhone: '手机号未填写',
				openId:'',
				flag:false,
				flag1:false,
				form: {
					name: '',
					work: '',
					phone: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					work: [{
						required: true,
						min: 3,
						message: '请输入职位',
						trigger: ['change', 'blur'],
					}],
					phone: [{
						required: true,
						min: 5,
						message: '请输入手机号',
						trigger: ['change', 'blur'],
					}]
				}
			}
		},
		onLoad() {
			this.openId= uni.getStorageSync('openId');
			this.getFirstInfo();
			if(this.cardName!=''&&this.cardPhone!=''&&this.cardWork!=''){
				this.flag1=true;
			}
		},
		onShow() {
			this.record += 1;
			// if (this.record %2== 1) {
			// 	this.lala = true;
			// }
		},
		methods: {
			// 初始化获取数据
			getFirstInfo(){
				let that=this;
				uni.request({
					url:'https://zioncloud.top/repair/businessCard/getBusinessCard',
					headers: {
						'Content-Type': 'application/json'
					},
					method: 'POST',
					data:{
						openId:that.openId
					},
					success(res) {
						console.log(res);
						that.cardName = res.data.data.businessCard.name;
						that.cardWork = res.data.data.businessCard.position;
						that.cardPhone = res.data.data.businessCard.phone;
					}
				})
			},
			// 提示没填写信息
			showTip(){
				uni.showToast({
					title:'请先填写并保存名片！',
					icon:'none',
					duration:1500
				})
			},
			togongzonghao() {
				uni.navigateTo({
					url:"./followUs/followUs"
				})
			},
			onShareAppMessage(res) {
				if(this.flag){
					return {
						title: '您好，很高兴认识您！',
						desc: '这是我的名片',
						// 分享图片地址
						// imageUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png',
						// 本地页面（请使用全路径）
						path: '/pages/createBusinessCard/cardPage/cardPage?name='+this.cardName+'&phone='+this.cardPhone+'&work='+this.cardWork,
					}
				}else{
					console.log('分享失败！');
					return;
				}
				
			},
			submit() {
				let that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						that.cardName = this.form.name;
						that.cardWork = this.form.work;
						that.cardPhone = this.form.phone;
						console.log(this.form.name+this.form.work+this.form.phone);
						console.log(that.openId);
						uni.request({
							url:'https://zioncloud.top/repair/businessCard/updateBusinessCard',
							headers: {
								'Content-Type': 'application/json'
							},
							method: 'POST',
							data:{
								openId:that.openId,
								name:that.form.name,
								position:that.form.work,
								phone:that.form.phone
							},
							success(res) {
								console.log(res);
								that.flag=true;
							},
							fail(err) {
								console.log(err);
							}
						})
						console.log('繁');
					} else {
						that.flag=false;
						console.log('验证失败');
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	page {
		background-color: rgb(233, 234, 238);
		height: 100%;
	}

	.cardText {
		font-weight: 700;
		/* padding-top: 25rpx; */
		margin-bottom: 25rpx;
		color:#000;
	}

	.contentBox {
		color:#FFF;
		padding: 25rpx;
		height: 100%;
		/* width:100%; */
	}

	.formList {
		margin: 0 25rpx;
		padding: 25rpx;
		height: 100%;
		background-color: #fff;
	}

	.cardBox {
		width: 100%;
		height: 500rpx;
		/* border-radius: 30rpx 30rpx 0 0; */
		border-radius: 30rpx;
		background-color: #564646;
	}

	.company {
		padding: 25rpx 25rpx 0 25rpx;
		font-size: 36rpx;
		font-weight: 700;
	}

	.logo {
		width: 100rpx;
		height: 100rpx;
		float: right;
	}

	.logo image {
		width: 100%;
		height: 100%;
	}

	.infoBox {
		margin: 25rpx 0 0 25rpx;
	}

	.personName {
		font-size: 34rpx;
		font-weight: 700;
	}

	.linkBox {
		margin: 25rpx;
	}

	.business {
		margin: 25rpx 25rpx 0 25rpx;
	}

	.icontext {
		padding-right: 15rpx;
		font-weight: 700;
	}
	.bottomBox{
		width:180rpx;
		height:180rpx;
		border-radius: 90rpx;
		line-height: 180rpx;
		text-align: center;
	}
	.boxBtn{
		margin:30rpx;
	}
</style>
